<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Disable favicon -->
    <link rel="icon" href="data:," />

    <title>mediasoup demo - WebRTC recording</title>
  </head>

  <body>
    <h1>mediasoup demo - WebRTC recording</h1>
    <p>
      This <b>mediasoup</b> demo receives the browser's webcam media using
      WebRTC (
      <a
        href="https://mediasoup.org/documentation/v3/mediasoup/api/#WebRtcTransport"
        target="_blank"
        >WebRtcTransport</a
      >
      ); it then starts an external recording process, and sends the media to it
      through RTP (
      <a
        href="https://mediasoup.org/documentation/v3/mediasoup/api/#PlainRtpTransport"
        target="_blank"
        >PlainRtpTransport</a
      >).
    </p>

    <div>
      Media:
      <label>
        <input type="radio" name="uiMedia" value="audio" />
        Audio only
      </label>
      <label>
        <input type="radio" name="uiMedia" value="video" />
        Video only
      </label>
      <label>
        <input type="radio" name="uiMedia" value="audio+video" checked />
        Audio + Video
      </label>
    </div>

    <div>
      Recording program:
      <label>
        <input type="radio" name="uiRecorder" value="ffmpeg" checked />
        FFmpeg
      </label>
      <label>
        <input type="radio" name="uiRecorder" value="gstreamer" />
        GStreamer
      </label>
      <label>
        <input type="radio" name="uiRecorder" value="external" />
        External
      </label>
    </div>

    <div>
      Video codec:
      <label>
        <input type="radio" name="uiVCodecName" value="VP8" checked />
        VP8 (WEBM file)
      </label>
      <label>
        <input type="radio" name="uiVCodecName" value="H264" />
        H.264 (MP4 file)
      </label>
    </div>

    <div>
      <ol>
        <li><button id="uiStartWebRTC">Start WebRTC</button></li>
        <li><button id="uiStartRecording" disabled>Start Recording</button></li>
        <li><button id="uiStopRecording" disabled>Stop Recording</button></li>
      </ol>
    </div>

    <div>
      <h2>Local video</h2>
      <video id="uiLocalVideo" style="width: 320px" autoplay muted></video>
    </div>

    <div>
      <h2>Recording process output</h2>
      <textarea
        id="uiConsole"
        style="width: 100%; height: 300px"
        readonly
      ></textarea>
    </div>
  </body>

  <script src="client-bundle.js"></script>
</html>
